<template>
    <el-dialog v-model="dialogFormVisible" :title="title" width="640" style="top: 100px">
        <el-form ref="userPwdFormRef" :model="form" :rules="rules" style="margin-left: 80px">
            <el-form-item label="密码" :label-width="100" required prop="password">
                <el-input v-model="form.password" autocomplete="off" maxlength="16" placeholder="请输入密码"
                          style="width: 300px;"/>
            </el-form-item>
            <el-form-item label="确认密码" :label-width="100" required prop="confirmPassword">
                <el-input v-model="form.confirmPassword" autocomplete="off" maxlength="16" placeholder="请输入确认密码"
                          style="width: 300px;"/>
            </el-form-item>
            <el-form-item label="" :label-width="100">
                <div style="color: red;font-size: 14px">默认密码是：123456</div>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer" style="text-align: center;margin-top: -30px">
                <el-button class="kva-button" @click="dialogFormVisible = false">取消</el-button>
                <el-button class="kva-button" type="primary" @click="handleResetPwd">
                    修改密码
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import {kvaMessage} from "@/utils/kvaMessage.js";
import {ResetSysUserPwd} from "@/api/sysUser.js"

// 弹窗标题
const title = ref("重置密码")
// 弹窗属性
const dialogFormVisible = ref(false)
// 弹窗导出属性
const userPwdFormRef = ref()
// 定义用户的属性
const user = ref()

// 定义容器属性
const form = reactive({
    userId: 0,
    password: '',
    confirmPassword: ''
})

// 校验规则rules
const rules = reactive({
    "password": [{required: true, message: "请输入密码", trigger: 'blur'}],
    "confirmPassword": [{required: true, message: "请输入确认密码", trigger: 'blur'}]
})

// 打开弹窗
const handleOpen = (row) => {
    user.value = row
    form.userId = row.id
    title.value = "正在修改的用户是：【" + user.value.username + "】"
    dialogFormVisible.value = true
}

// 修改密码的点击事件
const handleResetPwd = async () => {
    // 判断两次密码是否一致
    if (form.password != form.confirmPassword) {
        kvaMessage.error("两次密码输入不一致！")
        return
    }

    // 校验输入的合法性
    userPwdFormRef.value.validate(async (valid, fields) => {
        if (valid) {
            // 调用修改密码的方法
            await ResetSysUserPwd(form)
            kvaMessage.notifySuccess("密码修改成功！")
            // 关闭弹出
            dialogFormVisible.value = false
        }
    })

}


// 导出组件
defineExpose({
    handleOpen
})
</script>

<style scoped lang="scss">

</style>
